<template>
  <div class="card-article" ref="cardArticle">
    <div class="article__head">
      <a
        v-if="link && link.includes('http')"
        :href="link"
        target="_blank"
        class="article__img img-fit"
        @mousedown.prevent.stop
      >
        <img :src="image" :alt="alt" />
        <div class="article__img__mask">
          <div class="article__img__mask__btn">
            阅读
          </div>
        </div>
      </a>
      <button
        v-else-if="link"
        @click="handleClick(link)"
        class="article__img img-fit"
        @mousedown.prevent.stop
      >
        <img :src="image" :alt="alt" />
        <div class="article__img__mask">
          <div class="article__img__mask__btn">
            阅读
          </div>
        </div>
      </button>
      <div
        v-else
        class="article__img img-fit"
        @click="openPopup(componentProps?.key)"
      >
        <img :src="image" :alt="alt" />
        <div class="article__img__mask">
          <div class="article__img__mask__btn">
            阅读
          </div>
        </div>
      </div>
    </div>
    <div
      class="article__body"
      :class="{ 'is-single-column': singleColumn }"
    >
      <h6 class="article__title line-clamp-2 mt-3" v-if="title">
        {{ title }}
      </h6>
      <p class="article__desc line-clamp-4 mt-2" v-if="desc">
        {{ desc }}
      </p>
      <div class="article__footer">
        <div class="article__label" v-if="label">{{ label }}</div>
        <div class="article__date" v-if="date">{{ date }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// 定义组件名称
defineOptions({
  name: 'CardArticle'
})

// 定义 props
interface ComponentProps {
  key?: string
  image?: string
  meta?: {
    image?: string
    title?: string
    description?: string
  }
  title?: string
  alt?: string
  desc?: string
  labelName?: string
  label?: string
  category?: string
  date?: string
  time?: string
  link?: string
}

const props = defineProps<{
  componentProps?: ComponentProps
  singleColumn?: boolean,
  articleCategories?: {
    id: number
    key: string
    name: string
    hasArticles: boolean
  }[]
}>()

const emit = defineEmits(['openPopup', 'handleClick'])

// 响应式数据
const cardArticle = ref<HTMLElement | null>(null)
const transCategory = ref('')

// 方法
const openPopup = (key?: string) => {
  if (link.value || !key) return
  let cat = props.componentProps?.category


  if (typeof window !== 'undefined') {
    window.scroll({ top: 0, left: 0, behavior: 'smooth' })
  }
  const scrollY = typeof window === 'undefined' ? 0 : window.scrollY
  const positionY = cardArticle.value
    ? cardArticle.value.getBoundingClientRect().top + scrollY - 160
    : 0

  emit('openPopup', { key, cat, positionY })
}

const handleClick = (url: string) => {
  emit('handleClick', url)
}

// 计算属性
const image = computed(() => {
  if (!props.componentProps) return 'https://ywies-tx.cedim.cn/_nuxt/img/ywies-news-logo.202e378.jpg'
  if (props.componentProps.image) {
    return props.componentProps.image
  } else if (props.componentProps.meta?.image) {
    return props.componentProps.meta.image
  } else {
    return 'https://ywies-tx.cedim.cn/_nuxt/img/ywies-news-logo.202e378.jpg'
  }
})

const title = computed(() => {
  if (!props.componentProps) return null
  return props.componentProps.title
    ? props.componentProps.title
    : props.componentProps.meta?.title
})

const alt = computed(() => {
  if (!props.componentProps) return undefined
  return props.componentProps.alt ?? (title.value ?? undefined)
})

const desc = computed(() => {
  if (!props.componentProps) return null
  return props.componentProps.desc
    ? props.componentProps.desc
    : props.componentProps.meta?.description
})

const label = computed(() => {
  if (!props.componentProps) return null
  if (props.componentProps.labelName) {
    return props.componentProps.labelName
  }
  let labelCategory = props.componentProps.label
    ? props.componentProps.label
    : props.componentProps.category

  const articleCategories = props.articleCategories
  if (articleCategories && labelCategory) {
    let filterCategory = articleCategories.filter(
      (item: any) => item.key.toLowerCase() === labelCategory.toLowerCase()
    )
    transCategory.value = filterCategory[0]?.name
    return transCategory.value
  }

  return labelCategory
})

const date = computed(() => {
  if (!props.componentProps) return null
  return props.componentProps.date
    ? props.componentProps.date
    : formatTime(props.componentProps?.time)
})

const link = computed(() => {
  return props.componentProps?.link ?? null
})

// 工具函数
const formatTime = (time?: string) => {
  if (!time) return null
  const date = new Date(time)
  const year = date.getFullYear()
  const month = (date.getMonth() + 1).toString().padStart(2, '0')
  const day = date.getDate().toString().padStart(2, '0')
  
  return `${year}年${month}月${day}日`
}
</script>

<style lang="scss" scoped>
.mt-2 {
  margin-top: 8px!important
}
.mt-3 {
  margin-top: 12px!important
}
.card-article {
  .article__head {
    position: relative;
    .article__img {
      cursor: pointer;
      overflow: hidden;
      &:hover {
        .article__img__mask {
          @media (min-width: 768px) {
            background-color: rgba(0, 0, 0, 0.4);
            opacity: 1;
          }
        }
      }

      &__mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        transition: background-color .25s ease-out;
        opacity: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        &__btn {
          // 基础样式
          font-size: 16px;
          font-weight: 500;
          line-height: 1.5;
          letter-spacing: 0.01em;
          text-align: center;
          color: #F7F7FA;
          padding: 6px 10px;
          min-width: 140px;
          border: 1px solid #F7F7FA;
          border-radius: 2px;

          // 响应式样式
          @media (max-width: 767.98px) {
            font-size: 14px;
            line-height: 1.285;
            letter-spacing: 0.02em;
            min-width: 100px;
          }
          @media (max-width: 1023.98px) {
            line-height: 1.25;
            letter-spacing: 0.04em;
          }
        }
      }
    }       
  }
        
  .article__body {
    &.is-single-column {
      @media (max-width: 767.98px) {
        padding-left: 12px;
        padding-right: 12px;
      }
    }

    .article__title {
      color: #001e60;
    }

    .article__desc {
      font-size: 16px;
      font-weight: 400;
      line-height: 1.25;
      letter-spacing: 0.01em;
      @media (max-width: 1023.98px) {
        font-size: 14px;
        line-height: 1.285;
        letter-spacing: 0.01em;
      }
    }
    
    .article__footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 16px;
      column-gap: 20px;
      row-gap: 8px;

      @media (max-width: 1023.98px) {
        margin-top: 12px;
        column-gap: 16px;
      }

      @media (max-width: 767.98px) {
        column-gap: 12px;
      }

      .article__label,
      .article__date {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.285;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        @media (max-width: 1023.98px) {
          font-size: 13px;
          line-height: 1;
        }

        @media (max-width: 767.98px) {
          line-height: 1.166;
        }            
      }

      .article__label {
        color: #0048e8;
      }

      .article__date {
        color: #1a1c20;
        opacity: 0.6;
        white-space: nowrap;
      }
    }
  }

  .line-clamp-4 {
    -webkit-line-clamp: 4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 让 button 看起来像链接 */
  button.article__img {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    font: inherit;
    width: 100%;
    text-align: left;
  }
}

.img-fit {
  width: 100%;
}

.img-fit .img,.img-fit img {
  width: 100%;
  height: auto;
}
</style>
